import { ElMessage } from "element-plus"
import { menuTheme, headerTheme, asideTheme, optimumHeaderTheme } from "../config/theme"

// 默认主题颜色
export const DEFAULT_THEME = "#5727c4"

// 处理主题样式
export function handleThemeStyle(theme) {
  //   document.documentElement.style.setProperty("--el-color-primary", theme)
  //   for (let i = 1; i <= 9; i++) {
  //     document.documentElement.style.setProperty(
  //       `--el-color-primary-light-${i}`,
  //       `${getLightColor(theme, i / 10)}`
  //     )
  //   }
  //   for (let i = 1; i <= 9; i++) {
  //     document.documentElement.style.setProperty(
  //       `--el-color-primary-dark-${i}`,
  //       `${getDarkColor(theme, i / 10)}`
  //     )
  //   }
}

// hex颜色转rgb颜色
export function hexToRgb(str) {
  str = str.replace("#", "")
  let hexs = str.match(/../g)
  for (let i = 0; i < 3; i++) {
    hexs[i] = parseInt(hexs[i], 16)
  }
  return hexs
}

// rgb颜色转Hex颜色
export function rgbToHex(r, g, b) {
  let hexs = [r.toString(16), g.toString(16), b.toString(16)]
  for (let i = 0; i < 3; i++) {
    if (hexs[i].length == 1) {
      hexs[i] = `0${hexs[i]}`
    }
  }
  return `#${hexs.join("")}`
}

// 变浅颜色值
export function getLightColor(color, level) {
  let rgb = hexToRgb(color)
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2])
}

// 变深颜色值
export function getDarkColor(color, level) {
  let rgb = hexToRgb(color)
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor(rgb[i] * (1 - level))
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2])
}

/**
 * @description 全局主题配置
 * */
export const useTheme = () => {
  //   const globalStore = useGlobalStore()
  const { layout, isDark, themeColor, isGrey, isWeak, asideInverted, headerInverted } = {
    layout: ref(""),
    // 黑暗模式
    isDark: ref(false),
    themeColor: ref("#5727c4"),
    // themeColor: ref("#ff3040"),
    // 灰色模式
    isGrey: ref(false),
    // 色弱模式
    isWeak: ref(false),
    asideInverted: ref(""),
    headerInverted: ref(""),
  }
  // storeToRefs(globalStore)

  // 切换暗黑模式 ==> 同时修改主题颜色、侧边栏、头部颜色
  const switchDark = () => {
    // 获取HTML根节点
    const html = document.documentElement
    if (isDark.value) html.setAttribute("class", "dark")
    else html.setAttribute("class", "")
    changeThemeColor(themeColor.value)
    setAsideTheme()
    setHeaderTheme()
    setOptimumHeaderTheme()
  }

  // 修改主题颜色
  const changeThemeColor = (val) => {
    if (!val) {
      val = DEFAULT_THEME
      ElMessage({ type: "success", message: `主题颜色已重置为默认主题🌻` })
    }
    // 计算主题颜色变化
    document.documentElement.style.setProperty("--el-color-primary", val)
    document.documentElement.style.setProperty(
      "--el-color-primary-dark-2",
      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
    )
    for (let i = 1; i <= 9; i++) {
      const primaryColor = isDark.value
        ? `${getDarkColor(val, i / 10)}`
        : `${getLightColor(val, i / 10)}`
      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
    }

    // globalStore.setGlobalState("themeColor", val)
  }

  // 灰色和弱色切换
  const changeGreyOrWeak = (type, value) => {
    const body = document.body
    if (!value) return body.removeAttribute("style")
    const styles = {
      grey: "filter: grayscale(1)",
      weak: "filter: invert(80%)",
    }
    body.setAttribute("style", styles[type])
    const propName = type === "grey" ? "isWeak" : "isGrey"
    // globalStore.setGlobalState(propName, false)
  }

  // 设置菜单样式
  const setMenuTheme = () => {
    let type = "light"
    // 如果布局为横向 && 头部反转
    if (layout.value === "horizontal" && headerInverted.value) type = "inverted"
    // 如果布局不为横向 && 侧边反转
    if (layout.value !== "horizontal" && asideInverted.value) type = "inverted"
    // 如果是黑色主题，直接为黑色
    if (isDark.value) type = "dark"
    const theme = menuTheme[type]
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value)
    }
  }

  // 设置侧边栏样式
  const setAsideTheme = () => {
    let type = "light"
    if (asideInverted.value) type = "inverted"
    if (isDark.value) type = "dark"
    const theme = asideTheme[type]
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value)
    }
    setMenuTheme()
  }

  // 设置头部样式
  const setHeaderTheme = () => {
    let type = "light"
    if (headerInverted.value) type = "inverted"
    if (isDark.value) type = "dark"
    const theme = headerTheme[type]
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value)
    }
    setOptimumHeaderTheme()
    setMenuTheme()
  }

  // 设置混合模式头部样式
  const setOptimumHeaderTheme = () => {
    let type = "light"
    if (headerInverted.value) type = "inverted"
    if (isDark.value) type = "dark"
    const theme = optimumHeaderTheme[type]
    for (const [key, value] of Object.entries(theme)) {
      document.documentElement.style.setProperty(key, value)
    }
    setMenuTheme()
  }

  // 初始化主题配置
  const initThemeConfig = () => {
    switchDark()
    if (isGrey.value) changeGreyOrWeak("grey", true)
    if (isWeak.value) changeGreyOrWeak("weak", true)
  }

  return {
    initThemeConfig,
    switchDark,
    changeThemeColor,
    changeGreyOrWeak,
    setAsideTheme,
    setHeaderTheme,
  }
}
